<template>
  <!-- 客户管理-客户 -->
  <div class="client">
    <!-- 顶部 -->
    <div class="client_top">
      <van-nav-bar
        left-arrow
        @click-left="$router.go(-1)"
        :border="false"
        fixed
        z-index="999"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="25"
            @click="$router.push('/home')"
          />
        </template>
      </van-nav-bar>

      <!-- 顶部的客户信息 -->
      <div class="client_top_box">
        <div class="client_top_box_middle">
          <!-- 头像 -->
          <van-image
            round
            width="0.62rem"
            height="0.62rem"
            :src="headPortrait"
          />
          <!-- 名称与电话 -->
          <div class="box_middle">
            <div class="client_top_box_middle_1">
              名称: {{ clientInformation.custName }}
            </div>
            <div class="client_top_box_middle_2">
              电话: {{ clientInformation.telephone }}
            </div>
          </div>
        </div>

        <!-- 客户信息 -->
        <van-button
          color="#fc3"
          @click="
            $router.push({
              path: '/customerInformationDetails',
              query: { info: JSON.stringify(id) },
            })
          "
          >客户信息</van-button
        >
      </div>
    </div>

    <!-- 标签页 -->
    <van-tabs
      v-model="active"
      color="#fc3"
      title-active-color="#039"
      line-width="52"
      title-inactive-color="#666"
    >
      <van-tab>
        <template #title>
          <van-icon name="underway" />
          <div>收入分析</div>
        </template>
        <IncomeAnalysis :clientInformation1="clientInformation1" />
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon name="hotel-o" />
          <div>旗下企业</div>
        </template>
        <ItsSubsidiaries :clientInformation2="clientInformation2" />
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon name="friends" />
          <div>合作伙伴</div>
        </template>
        <CooperativePartner :clientInformation3="clientInformation3" />
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon name="gold-coin" />
          <div>当年收入</div>
        </template>
        <ThatVeryYearIncome :clientInformation4="clientInformation4" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { GetCustomerInformation } from "@/request/api";
import IncomeAnalysis from "@/components/IncomeAnalysis";
import ItsSubsidiaries from "@/components/ItsSubsidiaries1";
import CooperativePartner from "@/components/CooperativePartner";
import ThatVeryYearIncome from "@/components/ThatVeryYearIncome";

export default {
  data() {
    return {
      active: 0,
      headPortrait: require("../assets/头像男 拷贝 4.png"),
      id: "",

      // 客户信息
      clientInformation: [],
      // 收入分析
      clientInformation1: [],
      // 旗下企业
      clientInformation2: [],
      // 合作伙伴
      clientInformation3: [],
      // 当年收入
      clientInformation4: [],
    };
  },
  created() {
    this.id = JSON.parse(this.$route.query.info);
    // console.log(this.id);
    GetCustomerInformation(this.id).then((res) => {
      this.clientInformation = res.data;
      this.clientInformation1 = res.data.datas[0].data;
      this.clientInformation2 = res.data.datas[3].data;
      this.clientInformation3 = res.data.datas[2].data;
      this.clientInformation4 = res.data.datas[1].data;

      // console.log(res.data);
    });
  },
  components: {
    IncomeAnalysis,
    ItsSubsidiaries,
    CooperativePartner,
    ThatVeryYearIncome,
  },
};
</script>
 
<style lang = "less" scoped>
.client {
  /* 顶部 */
  .client_top {
    background-color: #039;
    height: 1.55rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: space-around;
    /deep/.van-nav-bar__content {
      background-color: #039;
    }
    /deep/.van-icon {
      color: #ffffff;
    }
    /* 顶部客户信息 */
    .client_top_box {
      width: 3.2rem;
      height: 0.95rem;
      background-color: #fff;
      position: absolute;
      top: 60px;
      border-radius: 0.1rem 0.1rem 0 0;
      display: flex;
      justify-content: space-between;
      .van-image {
        padding: 0.2rem;
      }
      .client_top_box_middle {
        display: flex;
        .box_middle {
          padding-top: 0.35rem;
          .client_top_box_middle_1 {
            color: #333;
            padding-bottom: 0.05rem;
          }
          .client_top_box_middle_2 {
            color: #666;
            font-size: 0.14rem;
          }
        }
      }
      .van-button {
        height: 0.2rem;
        border-radius: 9.99rem 0 0 9.99rem;
        margin-top: 0.2rem;
      }
    }
  } /* 标签页 */
  /deep/.van-tabs__wrap {
    margin-bottom: 0.2rem;
  }
  /deep/.van-tab__text--ellipsis {
    display: block;
    i {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>